<!-- 新开检查 -->
<template>
    <div class="new-check-container">
      <h1>新开检查</h1>
      <!-- 检查项目选择区域 -->
      <div class="check-projects">
        <div class="project-tags">
          <span 
            v-for="project in allProjects" 
            :key="project.checkItemId"
            class="tag"
            :class="{ 'selected': selectedProjects.includes(project.checkItemId) }"
            @click="toggleProject(project.checkItemId)"
          >
            {{ project.checkItemName }}
          </span>
        </div>
      </div>
      <!-- 查询区域 -->
      <div class="search-section">
        <input v-model="registrationNumber" placeholder="请输入挂号单号" />
        <button @click="search">Q查询</button>
        <button @click="reset" class="reset-btn">重置</button>
      </div>  
       <!-- 底部信息 -->
      <div class="bottom-info">
      <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="itemId" label="挂号单号" width="" />
    <el-table-column prop="patientName" label="患者姓名" width="" />
    <el-table-column prop="itemName" label="检查项目" />
    <el-table-column prop="remark" label="检查备注"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="kaisjc(scope.$index, scope.row)" plain>开始检查</el-button>       
      </template>
    </el-table-column>
  </el-table>
      </div>
      <!-- 分页 -->
        <div class="demo-pagination-block">
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[1, 2, 3]" :size="size"
          :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
   </div>
            
  </template>
  
  <script lang="ts" setup>
  import http from '@/http'
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize,TableInstance } from 'element-plus'

 // 当前页
 let pageNum=ref(1)
// 显示几页
let pageSize=ref(4)
      // 总条数
      let total=ref()
      const background = ref(false)
      const size = ref<ComponentSize>('default')
      const disabled = ref(false)
//查询的患者信息
let tableData=ref([])
//装载所有的项目
let allProjects=ref([])
// 分页方法
const handleSizeChange = (val: number) => {
  getxx();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  getxx();
  console.log(`current page: ${val}`)
}
 let getPage=()=>{
  //查询所有的项目
  http.post("/item/getCheckItemName").then((res)=>{
    allProjects.value=res
    console.log(allProjects.value)
  })
 } 
 let getxx=()=>{
      http.post("/docheck/getDocheck",
    {selectedList:selectedList.value,registrationNumber:registrationNumber.value}
  ).then((res) => {
    // length
    if(res.length>0){
        tableData.value = res;
        console.log(tableData.value)
    }else{
      tableData.value = res;
      ElMessage({
    message: '暂时没有患者',
    type: 'warning',
  })
    }
    }); 
    }
//加载事件总查询 
onMounted(()=>{
  getxx();    
  getPage();
})
 let registrationNumber=ref('')
 let selectedProjects=ref([])
 let selectedList=ref([])
 let toggleProject=(projectId)=>{
        let index = selectedProjects.value.indexOf(projectId)
        console.log(selectedProjects.value)
        if (index === -1) {
          selectedProjects.value.push(projectId)
          selectedList.value.push({
            projectId
          })
        } else {
        selectedProjects.value.splice(index, 1)
        selectedList.value.splice(index, 1)
        }
      } 
      // let getdocheck=()=>{
      //   http.get("/docheck/getDocheck/")
      // }
      let search = () => {
    // 确保 selectedList 是字符串列表    const selectedListData = selectedList.value.map(item => item.id);
     tableData.value=[]
    getxx()
};
// 重置按钮
let reset=()=>{
  selectedList.value=[];
  selectedProjects.value=[];
  registrationNumber.value='';
}
//添加的对象
let Result=ref({})
// 开始检查
let kaisjc=(index: number, row)=>{
  Result.value=row
  console.log(Result.value)
  //向检查结果录入添加
  http.post("/checkresult/addResult",Result.value).then((res)=>{
    console.log(res)
    if(res>0){
      ElMessage({
                        type: 'success',
                        message: '检查开始',
                    })
    }
  }).finally(()=>{
      getxx()
      })
}
  </script>
  
  <style scoped>
  .new-check-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .project-tags {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .tag {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .tag.selected {
    background-color: #409eff;
    color: white;
    border-color: #409eff;
  }
  
  .search-section {
    margin: 20px 0;
    display: flex;
    gap: 10px;
  }
  
  .check-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
  }
  
  th {
    background-color: #f5f7fa;
  }
  
  .reset-btn {
    background-color: #ff4d4f;
    color: white;
  }
  
  .bottom-info {
    margin-top: 30px;
    padding: 20px;
    border-top: 2px solid #eee;
    position: relative;
  }
  
  .start-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 12px 30px;
    background-color: #67c23a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 200px;
  }
  
  button {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  button:hover {
    opacity: 0.8;
  }
  </style>